import { defineConfig } from 'windicss/helpers'
import flexPlugin from 'whc-tailwind-flex-plugin'

export default defineConfig({
	darkMode: 'class',
	plugins: [flexPlugin],
	attributify: {
		prefix: '_'
	},
	theme: {
		extend: {
			colors: {
				'n-base-color': 'var(--base-color)',
				'n-primary-color': 'var(--primary-color)',
				'n-primary-color-hover': 'var(--primary-color-hover',
				'n-primary-color-pressed': 'var(--primary-color-pressed)',
				'n-primary-color-suppl': 'var(--primary-color-suppl)',
				'n-info-color': 'var(--info-color)',
				'n-info-color-hover': 'var(--info-color-hover)',
				'n-info-color-pressed': 'var(--info-color-pressed)',
				'n-info-color-suppl': 'var(--info-color-suppl)',
				'n-success-color': 'var(--success-color)',
				'n-success-color-hover': 'var(--success-color-hover)',
				'n-success-color-pressed': 'var(--success-color-pressed)',
				'n-success-color-suppl': 'var(--success-color-suppl)',
				'n-warning-color': 'var(--warning-color)',
				'n-warning-color-hover': 'var(--warning-color-hover)',
				'n-warning-color-pressed': 'var(--warning-color-pressed)',
				'n-warning-color-suppl': 'var(--warning-color-suppl)',
				'n-error-color': 'var(--error-color)',
				'n-error-color-hover': 'var(--error-color-hover)',
				'n-error-color-pressed': 'var(--error-color-pressed)',
				'n-error-color-suppl': 'var(--error-color-suppl)',
				'n-text-color-base': 'var(--text-color-base)',
				'n-text-color-1': 'var(--text-color-1)',
				'n-text-color-2': 'var(--text-color-2)',
				'n-text-color-3': 'var(--text-color-3)',
				'n-text-color-disabled': 'var(--text-color-disabled)',
				'n-placeholder-color': 'var(--placeholder-color)',
				'n-placeholder-color-disabled': 'var(--placeholder-color-disabled)',
				'n-icon-color': 'var(--icon-color)',
				'n-icon-color-hover': 'var(--icon-color-hover)',
				'n-icon-color-pressed': 'var(--icon-color-pressed)',
				'n-icon-color-disabled': 'var(--icon-color-disabled)',
				'n-divider-color': 'var(--divider-color)',
				'n-border-color': 'var(--border-color)',
				'n-close-icon-color': 'var(--close-icon-color)',
				'n-close-icon-color-hover': 'var(--close-icon-color-hover)',
				'n-close-icon-color-pressed': 'var(--close-icon-color-pressed)',
				'n-close-color-hover': 'var(--close-color-hover)',
				'n-close-color-pressed': 'var(--close-color-pressed)',
				'n-clear-color': 'var(--clear-color)',
				'n-clear-color-hover': 'var(--clear-color-hover)',
				'n-clear-color-pressed': 'var(--clear-color-pressed)',
				'n-scrollbar-color': 'var(--scrollbar-color)',
				'n-scrollbar-color-hover': 'var(--scrollbar-color-hover)',
				'n-progress-rail-color': 'var(--progress-rail-color)',
				'n-rail-color': 'var(--rail-color)',
				'n-popover-color': 'var(--popover-color)',
				'n-table-color': 'var(--table-color)',
				'n-card-color': 'var(--card-color)',
				'n-modal-color': 'var(--modal-color)',
				'n-body-color': 'var(--body-color)',
				'n-tag-color': 'var(--tag-color)',
				'n-avatar-color': 'var(--avatar-color)',
				'n-inverted-color': 'var(--inverted-color)',
				'n-input-color': 'var(--input-color)',
				'n-code-color': 'var(--code-color)',
				'n-tab-color': 'var(--tab-color)',
				'n-action-color': 'var(--action-color)',
				'n-table-header-color': 'var(--table-header-color)',
				'n-hover-color': 'var(--hover-color)',
				'n-table-color-hover': 'var(--table-color-hover)',
				'n-table-color-striped': 'var(--table-color-striped)',
				'n-pressed-color': 'var(--pressed-color)',
				'n-input-color-disabled': 'var(--input-color-disabled)',
				'n-button-color-2': 'var(--button-color-2)',
				'n-button-color-2-hover': 'var(--button-color-2-hover)',
				'n-button-color-2-pressed': 'var(--button-color-2-pressed)'
			},
			boxShadow: {
				'n-box-shadow-1': 'var(--box-shadow-1)',
				'n-box-shadow-2': 'var(--box-shadow-2)',
				'n-box-shadow-3': 'var(--box-shadow-3)'
			},
			opacity: {
				'n-opacity-1': 'var(--opacity-1)',
				'n-opacity-2': 'var(--opacity-2)',
				'n-opacity-3': 'var(--opacity-3)',
				'n-opacity-4': 'var(--opacity-4)',
				'n-opacity-5': 'var(--opacity-5)',
				'n-opacity-disabled': 'var(--opacity-disabled)'
			},
			fontSize: {
				'n-font-size': 'var(n-font-size)',
				'n-font-size-mini': 'var(n-font-size-mini)',
				'n-font-size-tiny': 'var(n-font-size-tiny)',
				'n-font-size-small': 'var(n-font-size-small)',
				'n-font-size-medium': 'var(n-font-size-medium)',
				'n-font-size-large': 'var(n-font-size-large)',
				'n-font-size-huge': 'var(n-font-size-huge)'
			},
			width: {
				'n-scrollbar-width': 'var(--scrollbar-width)'
			},
			height: {
				'n-scrollbar-height': 'var(--scrollbar-height)'
			},
			borderRadius: {
				'n-scrollbar-border-radius': 'var(--scrollbar-border-radius)',
				'n-border-radius': 'var(--border-radius)',
				'n-border-radius-small': 'var(--border-radius-small)'
			},
			lineHeight: {
				'n-line-height': 'var(--line-height)',
				'n-height-mini': 'var(--height-mini)',
				'n-height-tiny': 'var(--height-tiny)',
				'n-height-small': 'var(--height-small)',
				'n-height-medium': 'var(--height-medium)',
				'n-height-large': 'var(--height-large)',
				'n-height-huge': 'var(--height-huge)'
			},
			fontFamily: {
				'n-font-family': 'var(--font-family)',
				'n-font-family-mono': 'var(--font-family-mono)'
			},
			fontWeight: {
				'n-font-weight': 'var(--font-weight)',
				'n-font-weight-strong': 'var(--font-weight-strong)'
			},
			transitionTimingFunction: {
				'n-cubic-bezier-ease-in-out': 'var(--cubic-bezier-ease-in-out)',
				'n-cubic-bezier-ease-out': 'var(--cubic-bezier-ease-out)',
				'n-cubic-bezier-ease-in': 'var(--cubic-bezier-ease-in)'
			}
		}
	}
})
